<template>
  <el-form label-width="80px">
    <!-- 首部表单 -->
    <el-row style="margin-top: 20px" type="flex" justify="space-between">
      <el-col>
        <el-form-item label="学科">
          <el-select
            style="width: 100%"
            v-model="formData.subjectName"
            placeholder="请选择"
            @change="subSelectChange"
          >
            <el-option
              v-for="(item, i) in subjectList"
              :key="i"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col>
        <el-form-item label="二级目录">
          <el-select
            style="width: 100%"
            v-model="formData.twoLevelDir"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, i) in directoryList"
              :key="i"
              :label="item.directoryName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col>
        <el-form-item label="标签">
          <el-select
            style="width: 100%"
            v-model="formData.tag"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, i) in tagList"
              :key="i"
              :label="item.tagName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col>
        <el-form-item label="关键字">
          <el-input style="width: 100%" v-model="formData.keyWord"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <!-- 中部表单 -->
    <el-row type="flex" justify="space-between">
      <el-col>
        <el-form-item label="试题类型">
          <el-select
            style="width: 100%"
            v-model="formData.subjectDir"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, i) in questionType"
              :key="i"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col>
        <el-form-item label="难度">
          <el-select
            style="width: 100%"
            v-model="formData.difficulty"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, i) in difficulty"
              :key="i"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col>
        <el-form-item label="方向">
          <el-select
            style="width: 100%"
            v-model="formData.direction"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, i) in direction"
              :key="i"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col>
        <el-form-item label="录入人">
          <el-select
            style="width: 100%"
            v-model="formData.enterRole"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, i) in userList"
              :key="i"
              :label="item.username"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <!-- 底部表单 -->
    <el-row type="flex" justify="start">
      <el-col :span="6">
        <el-form-item label="题目备注">
          <el-input
            style="width: 100%"
            v-model="formData.titleRemark"
          >
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="企业简称">
          <el-input
            style="width: 100%"
            v-model="formData.companyShortName"
          >
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="城市">
          <el-select
            style="width: 49%"
            v-model="formData.province"
            placeholder="请选择"
            @change="citySelectChange"
          >
            <el-option
              v-for="(item, i) in provinces"
              :key="i"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
          <el-select
            style="width: 49%; margin-left: 4px"
            v-model="formData.city"
            placeholder="请选择"
          >
            <el-option v-for="(item, i) in citys" :key="i" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item style="float: right">
          <el-button @click="cleanAll">清除</el-button>
          <el-button type="primary" @click="search">搜索</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { simple as subList } from '@/api/hmmm/subjects'
import { list as dirList } from '@/api/hmmm/directorys'
import { list as tagList } from '@/api/hmmm/tags'
import { userList } from '@/api/hmmm/user'
import { provinces, citys } from '@/api/hmmm/citys'
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
export default {
  name: 'TopForm',
  data () {
    return {
      formData: {
        subjectName: '', // 学科
        twoLevelDir: '', // 二级目录
        tag: '', // 标签
        keyWord: '', // 关键字
        subjectDir: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        enterRole: '', // 录入人
        titleRemark: '', // 题目备注
        companyShortName: '', // 企业简称
        province: '', // 城市
        city: '' // 城市
      },
      difficulty: difficulty, // 难度列表
      questionType: questionType, // 试题类型
      direction: direction, // 方向
      subjectList: [], // 学科列表
      directoryList: [], // 二级目录列表
      tagList: [], // 标签列表
      userList: [], // 录入人列表
      provinces: [], // 所有城市
      citys: [] // 城市下地区
    }
  },
  created () {
    this.getSubjectList()
    this.getuserList()
    this.formateCityData()
  },
  methods: {
    // 获取学科列表
    async getSubjectList () {
      const { data } = await subList()
      this.subjectList = data
    },
    // 获取二级目录列表
    async getDirList (subjectID) {
      const {
        data: { items }
      } = await dirList({ subjectID })
      this.directoryList = items
    },
    // 获取标签列表
    async getTagList (subjectID) {
      const {
        data: { items }
      } = await tagList({ subjectID })
      this.tagList = items
    },
    // 学科选中值发生变化时触发
    subSelectChange (subjectID) {
      this.getDirList(subjectID)
      this.getTagList(subjectID)
    },
    // 获取用户列表数据
    async getuserList () {
      const { data } = await userList()
      this.userList = data
    },
    // 格式化城市下拉框数据
    formateCityData () {
      this.provinces = provinces()
    },
    // 所以当城市选择后，加载器对应的地区列表数据渲染下拉选项
    citySelectChange (city) {
      this.citys = citys(city)
    },
    // 清空所有之前输入或选择的筛选项数据
    cleanAll () {
      this.formData = {
        subjectName: '', // 学科
        twoLevelDir: '', // 二级目录
        tag: '', // 标签
        keyWord: '', // 关键字
        subjectDir: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        enterRole: '', // 录入人
        titleRemark: '', // 题目备注
        companyShortName: '', // 企业简称
        province: '', // 所有城市
        city: '' // 城市
      }
    },
    // 根据输入或选择的筛选条件，查询第一页基础题库数据且渲染列表
    search () {
      this.$emit('search', this.formData)
    }
  }
}
</script>

<style>
</style>
